<template>
  <div class="person">
    <h1>情况一:监视【ref】定义的【基本类型】数据</h1>
    <h2>当前求和为:{{sum}}</h2>
    <button @click="changeSum">点我+1</button>
    <h1>情况三:监视【reactive】定义的【对象类型】数据</h1>
    <h2>当前用户信息为:{{person.name}}</h2>
    <h2>年龄为:{{person.age}}</h2>
    <button @click="changePerson">修改整个人</button>
  </div>
</template>
<script lang="ts" setup name="Person">
import {ref,watch,reactive} from "vue";
//数据
let sum=ref(0)
let person=reactive({name:"张三",age:20})
//方法
function changeSum(){
  sum.value+=1
}
function changePerson(){
  Object.assign(person,{name:'李四',age:80})
}

//监视，情况一:监视【ref】定义的【基本类型】数据
const stopWatch=watch(sum,(newValue,oldValue)=>{
  console.log('watch监听到sum的变化，新的值为:',newValue,oldValue)
  if(newValue >= 10){
    console.log('sum大于10，停止watch')
    stopWatch()
  }
},{immediate:true})
//情况三:监视【reactive】定义的【对象类型】数据
watch(person,(newValue,oldValue)=>{
  console.log('watch监听到person的变化，新的值为:',newValue,oldValue)
})
</script>
<style>
.person{
  background-color: aqua;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button{
  margin: 0 5px;
}
</style>